<template>
  <div class="content">
    <a-image
      :preview="false"
      :src="backImg"
      class="cover"
      height="100vh"
      width="100vw"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, h } from "vue";
import { urlBackground, lx, format, method } from "@/utils/url";

export default defineComponent({
  name: "BackgroundImgCom",
  data() {
    return {
      backImg: require("@/assets/backImg.jpg"),
      width: 0,
      height: 0,
    };
  },
  created() {
    // 获取窗口大小
    this.bodyClientHandler();
    // 处理图片
    this.urlHandler();
  },
  mounted() {
    //
  },
  methods: {
    //处理图片链接
    urlHandler() {
      let BackData = {
        url: "http://api.btstu.cn/sjbz/api.php", // 网址
        lx: lx.fengjing, // 类型
        format: format.images, // 输出壁纸格式
        method: method.zsy, // 输出壁纸端
      };
      let url = urlBackground(BackData);
      // this.backImg = backImg;
    },
    // 获取窗口大小
    bodyClientHandler() {
      let width = document.body.clientWidth;
      let height = document.body.clientHeight;
      console.log(" 网页可见区域宽：", width);
      console.log(" 网页可见区域高：", height);
      this.width = width;
      this.height = height;
    },
  },
});
</script>

<style scoped lang="less">
.cover {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
}
</style>
